<template>
  <div class="add_commondity">
    <!-- 步骤条 -->
    <header>
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="选择砍价商品" />
        <el-step title="填写基础信息" />
        <el-step title="修改商品详情" />
      </el-steps>
    </header>
    <!-- 动态组件 -->
    <main>
      <keep-alive>
        <component :is="getCName" ref="activeComponent" />
      </keep-alive>
    </main>
    <!-- 操作按钮 -->
    <footer class="option">
      <el-button v-if="active !== 0" @click="last">上一步</el-button>
      <el-button
        v-if="active === 2"
        type="primary"
        @click="submit"
      >提交</el-button>
      <el-button v-else type="primary" @click="next">下一步</el-button>
    </footer>
  </div>
</template>

<script>
import TheForm from './components/TheForm'
import TheOrderEdit from './components/TheOrderEdit'
import Wang from './components/Wang'
export default {
  components: {
    TheForm,
    Wang,
    TheOrderEdit
  },
  data() {
    return {
      active: 0,
      componentsList: [
        { cName: 'TheForm', active: 0 },
        { cName: 'Wang', active: 1 },
        { cName: 'TheOrderEdit', active: 2 }
      ],
      formObj: {}
    }
  },
  computed: {
    getCName() {
      return this.componentsList.filter(
        (item) => item.active === this.active
      )[0].cName
    }
  },
  methods: {
    last() {
      this.active -= 1
    },
    next() {
      switch (this.active) {
        case 0:
          this.active += 1
          break
        case 1:
          this.active += 1
          break
        case 2:
          this.active += 1
          break
      }
    },

    submit() {
      alert('提交成功')
      this.$router.push('./commodity')
    }
  }
}
</script>

<style lang="scss" scoped>
.add_commondity {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  header {
    height: 100px;
  }
  main {
    flex: 1;
    overflow: auto;
  }
  footer {
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    button {
      height: max-content;
    }
  }
}
</style>
